<template>
  <div class="q-pa-md">
    <button @click="ceshi"> 1 </button>
    <div class="q-gutter-md">
    <div style="max-width: 500px;">
      <t-select
      style="height: 0;"
       ref="fasr_select_563137"
        label="下拉选择"
        placeholder="43243243423"
        :required='true'
        labelPosition="top"
        :lazyLoading="true"
        v-model:displayDataSource="displayDataSource"
        v-model="modelvalue"
        @change='fasr_select_563137_OnChange'
        @focus='fasr_select_563137_focus'
        emit-value
        map-options
        clearable
        :use-input="true"
        input-debounce="0"
        itemsDataSourceType="dynamic"
        displayField="label"
        valueField="value"
        :staticItems="[
          { label: '1111', value: '1', Name1: '动态数据源4', Code1: '4' },
          { label: '2222', value: '2', Name1: '动态数据源5', Code1: '5' },
          { label: '3333', value: '3', Name1: '动态数据源6', Code1: '6' },
        ]"
        :listDataSource="listDataSource"
        :opening="(e)=>{
          e.cancel=false
        }"
      >
        <template v-slot:no-option>
          <t-item>
            <t-item-section class="text-grey"> No results </t-item-section>
          </t-item>
        </template>
      </t-select>
      <div style="background-color: #F0F2F5;width: 300px;height: 50px;">   </div>
      <div style="background-color: #E6F2FB;width: 300px;height: 50px;">   </div>
    </div>
      <!-- <t-select
        emit-value
        map-options
        v-model="model"
        :options="[
          { label: 'mingcheng1', value: '1' },
          { label: 'mingcheng2', value: '2' },
          { label: 'mingcheng3', value: '3' },
        ]"
      >
      </t-select> -->

      <!-- <t-select
        filled
        v-model="model"
        emit-value
        map-options
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        :options="options"
        @filter="filterFn"
        hint="Basic filtering"
        style="width: 250px; padding-bottom: 32px"
      >
        <template v-slot:no-option>
          <t-item>
            <t-item-section class="text-grey"> No results </t-item-section>
          </t-item>
        </template>
      </t-select> -->
    </div>
    <q-badge color="secondary" multi-line> Model: "{{ modelvalue }}"  displayDataSource: "{{ displayDataSource }}" </q-badge>
  </div>
</template>

<script>
  import { onMounted, ref } from 'vue';

  const stringOptions = ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'];
  const objOptions = [
    {
      label: '谷歌',
      value: 'Google',
    },
    {
      label: '脸书',
      value: 'Facebook',
    },
    {
      label: '推特',
      value: 'Twitter',
    },
    {
      label: '苹果',
      value: 'Apple',
    },
  ];

  export default {
  setup() {
      const fasr_select_563137 = ref();
      const options = ref(objOptions);
      const listDataSource = ref();
      const modelvalue = ref('Google');
      const displayDataSource= ref('动态数据源4');
      onMounted(() => {
        listDataSource.value = [
        {
      label: '谷歌',
      value: 'Google',
    },
    {
      label: '脸书',
      value: 'Facebook',
    },
    {
      label: '推特',
      value: 'Twitter',
    },
    {
      label: '苹果',
      value: 'Apple',
    },
        ];
        // model.value = '3';
      });


      return {
        fasr_select_563137,
        options,
        modelvalue,
        displayDataSource,
        listDataSource,
        filterFn(val, update, abort) {
          update(() => {
            const needle = val.toLowerCase();
            options.value = objOptions.filter(
              v => v.label.toLowerCase().indexOf(needle) > -1,
            );
          });
        },
         fasr_select_563137_OnChange(e) {
          console.log("modelvalue:",modelvalue,  "displayDataSource:",displayDataSource)
          console.log(fasr_select_563137.value.selectLabel);
        },
        ceshi() {
          fasr_select_563137.value.showPopup();
        },
         fasr_select_563137_focus() {
  // alert(1)
}
      };
    },
  };
</script>
